<template>
	<div class="factory_icon">
		<el-dialog title="选择图标" :visible.sync="visible" width="60%" append-to-body>
			<el-tabs type="border-card">
				<!-- 物品图标标签页 -->
				<el-tab-pane label="物品图标">
					<div class="icon-list">
						<div v-for="(item, index) in itemIcons" :key="'item-' + index" class="icon-item"
							@click="handleSelect('items', item)">
							<my-image type="items" :icon="item" :size="40" />
						</div>
					</div>
				</el-tab-pane>

				<!-- 建筑图标标签页 -->
				<el-tab-pane label="建筑图标">
					<div class="icon-list">
						<div v-for="(build, index) in buildIcons" :key="'build-' + index" class="icon-item"
							@click="handleSelect('buildings', build)">
							<my-image type="buildings" :icon="build" :size="40" />
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</el-dialog>

		<!-- 当前选中的图标展示 -->
		<div class="current-icon" @click="handleOpen">
			<my-image :type="icon.type" :icon="icon.url" :size="64" />
			<div class="icon-info">
				<p>图标类型：{{ icon.type || '未选择' }}</p>
				<p>图标路径：{{ icon.url || '未选择' }}</p>
			</div>
		</div>
	</div>
</template>

<script>
	import MyImage from '@/components/Image.vue';

	export default {
		name: "IconSelect",
		props: ["type", "url"],
		emits: ["change"],
		components: {
			MyImage
		},
		data() {
			return {
				visible: false,
				icon: {},
				itemIcons: [],
				buildIcons: [],
			}
		},
		watch: {
			// 深度监听 props 组合变化
			'$props': {
				handler(newVal) {
					console.log(newVal);
					this.icon = {
						type: newVal.type,
						url: newVal.url
					}
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			handleOpen() {
				// console.log("启动");
				this.visible = true;
			},
			handleSelect(type, url) {
				this.visible = false;
				this.$emit('change', type, url);
			}
		},
		mounted() {
			this.$api.get("/item/icon").then((res) => {
				this.itemIcons = res.data.list;
			});
			this.$api.get("/build/icon").then((res) => {
				this.buildIcons = res.data.list;
			});
		}
	}
</script>

<style lang="less" scoped>
	@import "@/assets/less/variables.less";

	.factory_icon {
		cursor: pointer;
		transition: all 0.3s;

		&:hover {
			transform: translateY(-2px);
		}

		.current-icon {
			display: flex;
			align-items: center;
			gap: 16px;
			padding: 12px;
			border: 1px solid @color-border;
			border-radius: 8px;

			.icon-info {
				p {
					margin: 4px 0;
					font-size: 14px;
					color: @color-subtext;
				}
			}
		}
	}

	.icon-list {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		padding: 16px;
		max-height: 48vh;
		overflow-y: auto;

		.icon-item {
			padding: 8px;
			border: 1px solid @color-border;
			border-radius: 6px;
			cursor: pointer;
			transition: all 0.2s;

			&:hover {
				border-color: @color-primary;
				box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
			}

			::v-deep .my-image-container {
				display: block;
				width: 40px;
				height: 40px;
			}
		}
	}

	.el-tabs {
		::v-deep .el-tabs__content {
			padding: 0 !important;
		}
	}
</style>